<template>
<div class="bgfff detail">
    <h1 class="text_center">{{detail.title}}</h1>
    <div class="detail_source font12 color666">发布时间：{{detail.createTime}}</div>
    <div class="detail_cont" v-html="detail.content"></div>
</div>
</template>

<script>
export default {
    name: "listDetail",
    props: {
        detailId: {
            default: ""
        }
    },
    data() {
        return {
            detail: {
                title: '',
                cityShopName: '',
                createTime: '',
                content: '',
                video: ''
            },
            // 视频播放
            playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "",
                    src: "" //url地址
                }],
                poster: "", //你的封面地址
                // width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, //当前时间和持续时间的分隔符
                    durationDisplay: true, //显示持续时间
                    remainingTimeDisplay: false, //是否显示剩余时间功能
                    fullscreenToggle: true //全屏按钮
                }
            }
        };
    },
    mounted() {
        let title = this.$route.query.metaTitle;
        let typea = this.$route.query.title;
        let headerTile = this.$route.query.headerTile;
        if (title == "志愿服务风采") {
            this.getDetail();
        } else if (title == "大成小店") {
            this.getlistDetail();
        } else if (title == "理论政策大讲堂") {
            this.getChapelListDetail();
        } else if (title == "首页") {
            if (typea == '小店要闻') {
                this.getNews();
            } else if (headerTile == '文明实践聚焦') {
                this.getIndex2()
            } else if (headerTile == '典型展示') {
                this.getIndex3()
            } else if (headerTile == '文明实践工作') {
                this.getIndex4()
            } else if (headerTile == '文明实践进行时') {
                this.getIndex5()
            } else if (headerTile == '文明实践活动') {
                this.getIndex6()
            }
        } else if (title == '组织架构') {
            this.getOras()
        } else {
            this.getfake();
        }
    },
    methods: {
        getfake() {
            let _this = this;
            _this.detail.title = _this.$route.query.title
            _this.detail.createTime = '2020-04-27'
        },
        // 小店要闻
        getNews() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/homePage/query/getNewsColumnDetail", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        // data.video = 'http://xdnew.fancysx.com/xsd/cae5e23e382a443583a5df22a6988cbb.mp4'
                        // this.getVideoData(data.video)
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址  
                    } else {
                        console.log("errorList");
                    }
                });
        },
        getVideoData(url) {
            let _this = this;
            this.$axios
                .post("https://xdnew.fancysx.com/cp-api/worksite/videoFile", this.$qs.stringify({
                    fileName: url
                }))
                .then(res => {
                    // this.detail.video = res
                    _this.playerOptions['sources'][0]['src'] = res; //动态更改流地址  

                });
        },
        // 组织架构
        getOras() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/cityShop/query/getOrganizationFrameworknews", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 文明实践聚焦
        getIndex2() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/homePage/query/getCivilizedPracticeFocusDetail", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 典型展示
        getIndex3() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/homePage/query/getModelShowNewsDetail", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 文明实践工作
        getIndex4() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/homePage/query/getCivilizedPracticeworkNews", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 文明实践进行时
        getIndex5() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/homePage/query/getCivilizedPracticeingNews", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 文明实践活动
        getIndex6() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/homePage/query/getCivilizedPracticeactivityNews", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 数字小店
        getDetail() {
            let _this = this;
            let param = {
                cityShopId: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/cityShop/query/getCityShopNews", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        //涉农
        getlistDetail() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post(
                    "https://xdnew.fancysx.com/cp-api/cityShop/query/getAgricultureWorkDetail",
                    _this.$qs.stringify(param)
                )
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        },
        // 理论政策大讲堂
        getChapelListDetail() {
            let _this = this;
            let param = {
                id: _this.detailId
            };
            _this.$axios
                .post("https://xdnew.fancysx.com/cp-api/cityShop/query/getPolicyNews", _this.$qs.stringify(param))
                .then(res => {
                    var res = res.data;
                    if (res.status == "success") {
                        var data = res.data;
                        _this.detail = data;
                        _this.playerOptions['sources'][0]['src'] = data.video; //动态更改流地址
                    } else {
                        console.log("errorList");
                    }
                });
        }
    }
};
</script>

<style lang="stylus" scoped>
.input_video {
    margin-bottom: 22px;
}

.bgfff {
    background: #fff;
    box-shadow: 0px 0px 8px 0px rgba(67, 67, 67, 0.2);
    margin: 38px 0;
}

.detail {
    padding: 98px 62px;
}

.detail h1 {
    font-size: 28px;
}

.detail .detail_source {
    margin: 70px 0 22px;
}

.detail .detail_cont {
    font-size: 16px;
    line-height: 2 !important;
}

.detail .detail_cont p img {
    width: 100%;
    height: auto;
}
</style>home
